<template>
    <div class="dbtn-box" :style="bgColor + effect + padding">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <div class="dbtn" :style="base"
             v-text="content.value"
             @click="linkTo()"/>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';
    import Stats from '../stats.js';

    export default {
        name: 'YXDownloadButton',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        value: '立即下载',
                        android_download_url: '',
                        android_evoke_url: '',
                        ios_download_url: '',
                        ios_evoke_url: ''
                    };
                }
            },
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        base: {
                            width: 90,
                            height: 44,
                            btnColor: {
                                color: 'rgba(253, 65, 95, 1)'
                            },
                            bgColor: {
                                color: 'rgba(255, 255, 255, 0)'
                            },
                            color: {
                                color: 'rgba(255, 255, 255, 1)'
                            },
                            size: '14',
                            radius: '4'
                        },
                        effect: {
                            value: ''
                        },
                        padding: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        }
                    };
                }
            },
            shortIndex: {
                type: String,
                default: ''
            }
        },
        components: {
            Hover
        },
        data() {
            return {
                // true: 表示当前设备是ios
                device: false
            };
        },
        computed: {
            bgColor() {
                return `background-color: ${this.appearance.base.bgColor.color};`;
            },
            base() {
                let b = this.appearance.base;
                let width = `width: ${b.width}%;`;
                let height = `height: ${b.height}px;`;
                let lineh = `line-height: ${b.height}px;`;
                let btnColor = `background-color: ${b.btnColor.color};`;
                let color = `color: ${b.color.color};`;
                let size = `font-size: ${b.size}px;`;
                let radius = `border-radius: ${b.radius}px;`;

                return width + height + lineh + btnColor + color + size + radius;
            },
            effect() {
                let ev = this.appearance.effect.value;
                // let isPL = /h5.vbbobo.com/i.test(window.document.domain);

                if (ev) {
                    if (this.isEdit) {
                        return `position: absolute;${ev}: 0;z-index: 2000;`;
                    } else {
                        return `position: fixed;${ev}: 0;z-index: 2000;`;
                    }
                }
                return '';
            },
            padding() {
                let p = this.appearance.padding;
                return `padding: ${p.top}px ${p.right}px ${p.bottom}px ${p.left}px;`;
            }
        },
        methods: {
            linkTo() {
                this.device = this.getRunEnv();
                if (this.device) {
                    this.evoke(this.content.ios_evoke_url);
                } else {
                    this.evoke(this.content.android_evoke_url);
                }
            },
            getRunEnv() {
                let agent = navigator.userAgent.toLowerCase();
                let res = {
                    os: (function () {
                        if (/(iphone|ipod|ipad|ios)/.test(agent)) {
                            return 'ios';
                        } else {
                            return 'other';
                        }
                    })()
                };
                // 是否IOS
                return res.os === 'ios';
            },
            evoke(url) {
                if (url) {
                    let timer = null;
                    window.location.href = url;
                    document.addEventListener('visibilitychange', _ => {
                        // 页面切换时取消下载定时器
                        timer && clearTimeout(timer);
                    });
                    if (this.shortIndex) {
                        Stats.sendRequest('h5_deeplink_click', this.shortIndex)
                    }
                    timer = setTimeout(_ => {
                        this.download();
                    }, 3000);
                } else {
                    this.download();
                }
            },
            download() {
                let device = this.device;
                let url = device ? this.content.ios_download_url : this.content.android_download_url;

                if (url) {
                    const _a = document.createElement('a');
                    _a.href = url;
                    _a.download = true;
                    document.body.appendChild(_a);
                    _a.click();
                    document.body.removeChild(_a);
                    if (this.shortIndex) {
                        Stats.sendRequest('h5_download_click', this.shortIndex);
                    }
                } else {
                    return false;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .dbtn-box {
        position: relative;
        width: 100%;
        z-index: 9;
        text-align: center;
        display: flex;
        justify-content: center;

        .dbtn {
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>
